<!-- Copyright (c) 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->

<polymer-element name="cr-date" attributes="date relative">
    <template>
        <template if="{{ relative }}">
            <span title="{{ date | formatAbsolute }}">{{ date | formatRecentRelative }}</span>
        </template>
        <template if="{{ !relative }}">
            <span title="{{ date | formatRelative }}">{{ date | formatAbsolute }}</span>
        </template>
    </template>
    <script>
    (function() {
        var THREE_MONTHS_AGO = Date.create("3 months ago");
        var SIX_MONTHS_AGO = Date.create("6 months ago");

        Polymer({
            publish: {
                // relative == true means show a relative date (e.g., 2 days ago) as
                // visible text on the page, and allow the user to hover to see the
                // absolute date.  relative == false still offers both relative and
                // absolute formats, but it makes the absolute date visible on the page
                // and puts the relative date in the tooltip.
                relative: false,
            },
            formatRecentRelative: function(date) {
                if (!date)
                    return "";

                // The main point of a relative date display is to let the user
                // easily understand how recently a recent event happened.
                if (date > THREE_MONTHS_AGO)
                    return date.relative();  // E.g., "2 days ago"

                // However, when the date is farther in the past, it is
                // immedately understood that the event is old, and it is more
                // useful to be able to compare it to other absolute dates.
                if (date > SIX_MONTHS_AGO)
                    return date.format("{Mon} {ord}");  // E.g., "Jul 11th"
                else
                    return date.format("{Mon} {yyyy}");  // E.g., "Jan 2011"
            },
            formatRelative: function(date) {
                if (!date)
                    return "";
                return date.relative();  // E.g., "2 days ago"
            },
            formatAbsolute: function(date) {
                if (!date)
                    return "";
                return date.format("{Mon} {ord} {yyyy} {h}:{mm}{tt}");
            },
        });
    })();
    </script>
</polymer-element>
